<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-04-23 17:11:36
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-28 15:20:49
 * @FilePath: /XMate-h5/src/views/badge/components/bindDeviceView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="px-4 pt-4 pb-8">
    <h4 class="mb-4 text-sm">请输入工牌上的SN序列号</h4>
    <div class="border rounded-md mb-4">
      <el-autocomplete
        ref="autocompleteRef"
        class="form-autocomplete"
        v-model="cp_text"
        clearable
        :debounce="300"
        :fetch-suggestions="querySearchName"
        placeholder="请输入SN序列号"
        @blur="autocompleteRef.close()"
        @select="handleSelectSuggestions"
      >
        <template v-slot:prefix>
          <!-- <van-icon @click.stop="emits('onScan')" name="scan"></van-icon> -->
          <p class="ml-1">SN</p>
        </template>
      </el-autocomplete>
    </div>
    <span class="text-sm text-gray-400">
      SN序列号可在工牌背面或包装盒上找到
      <span @click="onClickHelp" class="ml-2 text-yxt-blue underline text-sm"
        >如何查找序列号
      </span>
    </span>
    <p class="mt-2 text-sm text-gray-400" v-if="des">{{ des }}</p>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed, ref } from "vue";
import { showImagePreview } from "vant";

const autocompleteRef = ref();

const emits = defineEmits(["update:text", "onScan"]);
const props = defineProps({
  text: {
    type: String,
  },
  des: {
    type: String,
  },
  querySearchName: {
    type: Function,
  },
  handleSelectSuggestions: {
    type: Function,
  },
});

const cp_text = computed({
  get: () => props.text,
  set: (v) => emits("update:text", v),
});

function onClickHelp() {
  showImagePreview({
    images: ["https://meetcdn.yxt.com/lingxi-static-resources/img/IMG_2232.jpeg"],
    closeable: true,
  });
}
</script>

<style scoped lang="less"></style>
